<template>
  <div class="account-box">
    <mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
    <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
    <mt-tabbar v-model="selected">
      <mt-tab-item>
        <router-link :to="{path: '/register'}">注册帐号</router-link>
      </mt-tab-item>
      <mt-tab-item>
        <router-link :to="{path: '/forgetpwd'}">忘记密码</router-link>
      </mt-tab-item>
    </mt-tabbar>

    <mt-button class="account-login-btn" type="primary" size="small" @click="loginBtn">登录</mt-button>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';

export default {
  data () {
    return {
      username: '',
      password: '',
      selected: 'tab1'
    }
  },
  methods: {
    loginBtn () {
      var userInfo = JSON.parse(this.getItemStorange("userInfo"));
      if(userInfo != null && userInfo.loginSta === false) {
        if(this.username != userInfo.username) {
          Toast('用户名输入错误');
          return;
        }
        if(this.password != userInfo.password) {
          Toast('密码输入错误');
          return;
        }
        userInfo.loginSta = true;
        this.setItemStorange("userInfo", JSON.stringify(userInfo));
        Toast('登录成功');
        this.$router.push('/');
      } else {
        Toast('您已登录');
        this.$router.push('/');
      }
    }
  }
}
</script>

<style lang="less">
  .account-box {
    padding: 70px 20px;
    .mint-cell {
      min-height: 40px;
    }
    .mint-cell-wrapper {
      background-position: bottom left;
      padding: 0;
    }
    .mint-cell-text {
      font-size: 12px;
      padding-left: 15px;
    }
    .mint-field-core {
      font-size: 12px;
    }
    .account-login-btn {
      margin-top: 25px;
      width: 100%;
    }
    .mint-tab-item-label {
      padding: 10px 0;
    }
  }
</style>